多頁式網站

2024 iThome 鐵人賽

DAY 14

自我挑戰組

asp.net可以變出那些功能系列第 14 篇

16th鐵人賽

Tzu

2024-09-21 06:53:57

91 瀏覽

分享至

其實我覺得工程師要靠配色去創造不同的風格，還有美學真的是有難度
而且像是多頁式網站的風格的內容範例，
要工程師去想真的是要有想像力啊~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡都只有Controllers裡面的Entities>產生畫面View

或許後面不夠寫會再回頭創造出資料表的連結也是有可能的，可以期待~

多頁式網站
https://laihao2.com/Home/Contact7_index

只有Controllers裡面的Entities>產生畫面View

但是這篇就串聯很多的網頁共有四個

第一個https://laihao2.com/Home/Contact7_index

Controllers裡面的Entities

public ActionResult Contact7_index()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 的控制器動作方法（Action Method）。下面逐步解釋：

public ActionResult Contact7_index()

這是一個公共方法，返回類型為 ActionResult。ActionResult 是 ASP.NET MVC 中的一個返回類型，用於表示不同類型的響應結果（例如 HTML 頁面、JSON 數據、文件等）。
方法名 Contact7_index() 是開發者自定義的，表示這個方法可能與 "Contact"（聯系頁面）有關，並且 "7" 可能是版本號或某種標識符。

ViewBag.Message = "Your contact page.";

ViewBag 是一個動態對象，通常用來在控制器和視圖之間傳遞數據。它不需要提前定義類型。
這里 ViewBag.Message 設置為 "Your contact page."，表示這條消息會被傳遞給視圖（View），並可以在視圖中顯示出來。

return View();

return View(); 語句將渲染與這個動作方法同名的視圖。由於方法名是 Contact7_index，ASP.NET MVC 框架會查找名為 Contact7_index.cshtml 的視圖文件，並返回給用戶。

總結：

這個方法用於處理與聯系頁面相關的請求。
它通過 ViewBag.Message 傳遞一個消息到視圖，並且返回與此動作方法關聯的視圖（HTML 頁面）。
產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@{
    ViewBag.Title = "Contact7_index";
}

<div class="farm-wrapper">

    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
            <link rel="stylesheet" href="css/style.css">

            <title>Restaurant</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body class="topPage">
            <header>
                <h1>
                    <img src="~/templates/webphoto.jpg" alt="My Photo"style="width:200px; height:auto;" />>
                </h1>
                <nav class="gMenu">
                    <input class="menu-btn" type="checkbox" id="menu-btn">
                    <label class="menu-icon" for="menu-btn">
                        <span class="navicon"></span>
                    </label>
                    <ul class="menu">
                        @*
                        <li><a href="Contact7_index.cshtml">home</a></li>
                        <li><a href="Contact7_concept.cshtml">concept</a></li>
                        <li><a href="Contact7_menu.cshtml">menu</a></li>
                        <li><a href="Contact7_info.cshtml">info</a></li>*@
                        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
                    </ul>
                </nav>
            </header>
            <main>
                <ul class="linkList">
                    <li>
                        <a href="@Url.Action("Contact7_concept", "Home")">
                            <img src="~/templates/top_ph01.jpg" alt="">
                            <span>CONCEPT</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Contact7_menu", "Home")">
                            <img src="~/templates/top_ph02.jpg" alt="">
                            <span>MENU</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Contact7_info", "Home")">
                            <img src="~/templates/top_ph03.jpg" alt="">
                            <span>INFORMATION</span>
                        </a>
                    </li>
                </ul>
            </main>
        </body>
        </html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 中的視圖，使用 Razor 語法來動態生成 HTML 頁面。它主要用於展示一個正在建置的“多頁式網站”的結構。以下是對代碼的詳細解釋：

1. 布局設置和視圖標題

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact7_index";
}

Layout = "~/Views/Shared/_Layout.cshtml"：指定此頁面使用共享的布局文件 _Layout.cshtml，以確保統一的頁面結構。
ViewBag.Title：通過 ViewBag 動態設置此頁面的標題為 "Contact7_index"。

2. HTML 頁面結構

<div class="farm-wrapper">
    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

這個部分是網頁的內容，包含一個 div 容器，表示當前頁面的布局區域，並包含兩個標題 <h3> 標簽，說明頁面是一個正在建設中的多頁式網站。

3. 頭部（Head）部分

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    @section styles {
        <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
    }
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/style.css">
    
    <title>Restaurant</title>
    <style>
        img { border-radius: 50%; }
        body { background-color: pink; }
        dl { margin-left: 20px; }
        dd { margin-left: 20px; }
    </style>
</head>

meta charset="UTF-8"：設置頁面的字符編碼為 UTF-8。
link rel="stylesheet"：引入外部樣式表，分別為 style.css 和 reset.css，用於統一和重置瀏覽器的默認樣式。
@Url.Content()：用於生成指向項目中內容的絕對路徑，確保 reset.css 和 farm-style.css 樣式文件被正確引用。
meta name="viewport"：設定響應式設計，讓頁面適應各種設備的寬度。
link rel="preconnect" 和 link rel="stylesheet"：預先連接到 Google 字體，並使用了 Catamaran 和 Noto Sans TC 字體。
內聯樣式 <style>：設置了一些基礎樣式，如圖片圓形邊框、背景顏色粉色以及定義了一些 HTML 元素的邊距。

4. 頁面主體（Body）部分

<body class="topPage">
    <header>
        <h1>
            <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;">
        </h1>
        <nav class="gMenu">
            <input class="menu-btn" type="checkbox" id="menu-btn">
            <label class="menu-icon" for="menu-btn">
                <span class="navicon"></span>
            </label>
            <ul class="menu">
                <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
            </ul>
        </nav>
    </header>

header 標簽包含網站的頂部導航欄，顯示了網站標題及導航菜單。
<img src="~/templates/webphoto.jpg">：顯示一個圖片，表示網站的 logo 或相關圖片。
<nav class="gMenu">：定義導航菜單，通過覆選框和標簽控制菜單的顯示與隱藏，適用於移動設備的響應式設計。
使用 @Url.Action("ActionName", "ControllerName")：生成指向不同頁面的鏈接，如主頁、概念、菜單和信息頁面。

5. 頁面主要內容（Main）部分

<main>
    <ul class="linkList">
        <li>
            <a href="@Url.Action("Contact7_concept", "Home")">
                <img src="~/templates/top_ph01.jpg" alt="">
                <span>CONCEPT</span>
            </a>
        </li>
        <li>
            <a href="@Url.Action("Contact7_menu", "Home")">
                <img src="~/templates/top_ph02.jpg" alt="">
                <span>MENU</span>
            </a>
        </li>
        <li>
            <a href="@Url.Action("Contact7_info", "Home")">
                <img src="~/templates/top_ph03.jpg" alt="">
                <span>INFORMATION</span>
            </a>
        </li>
    </ul>
</main>

main 標簽中包含一個無序列表 (ul)，每個列表項 (li) 包含一個鏈接，這些鏈接指向不同的頁面部分（如概念、菜單和信息）。
每個鏈接都有一張圖片和一段文字描述，通過 @Url.Action() 生成實際的 URL。

總結

該視圖代碼展示了一個簡單的網站頁面布局，帶有頭部導航和主要內容區域。它使用了 ASP.NET MVC 的 Razor 語法來生成動態鏈接，並通過 CSS 和 JavaScript 實現響應式設計，適合多設備訪問。
第2個https://laihao2.com/Home/Contact7_concept

Controllers裡面的Entities

public ActionResult Contact7_concept()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是 ASP.NET MVC 控制器中的一個方法，負責處理用戶對 Contact7_concept 頁面請求的邏輯。以下是詳細解釋：

1. 方法聲明

public ActionResult Contact7_concept()

public：這是一個公開方法，意味著該方法可以被外部調用（例如，通過 URL 請求）。
ActionResult：這是方法的返回類型，它表示該方法將返回一個行動結果（ActionResult）。在 ASP.NET MVC 中，ActionResult 是控制器動作的標準返回類型，表示可以返回多種類型的響應，如視圖、重定向或 JSON 數據。
Contact7_concept：這是方法的名稱，通常對應 URL 請求的一部分。用戶訪問 http://yourdomain/Home/Contact7_concept 時，ASP.NET MVC 會調用這個方法。

2. ViewBag

ViewBag.Message = "Your contact page.";

ViewBag：這是一個動態對象，允許在控制器與視圖之間傳遞數據。通過 ViewBag 傳遞的數據不需要預先定義類型，適合傳遞簡單的鍵值對。
ViewBag.Message = "Your contact page."：在這里，ViewBag.Message 被賦值為 "Your contact page."。這意味著在視圖中可以通過 @ViewBag.Message 訪問並顯示這條信息。

3. 返回視圖

return View();

return View();：這是控制器動作返回視圖的標準方式。它告訴 ASP.NET MVC 引擎返回一個與動作方法同名的視圖，即 Contact7_concept.cshtml 視圖文件。
如果沒有指定視圖名，默認情況下，ASP.NET MVC 會在 /Views/ControllerName/ 文件夾下尋找與動作同名的視圖。因此，MVC 框架會查找 Views/Home/Contact7_concept.cshtml 文件並將其渲染給用戶。

總結

這段代碼的作用是處理用戶對 Contact7_concept 頁面請求，並將 ViewBag.Message 中的信息傳遞給視圖用於顯示。最終，它返回一個視圖，可能是 Views/Home/Contact7_concept.cshtml，用來渲染網頁的內容。
產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@{
    ViewBag.Title = "Contact7_concept";
}

<div class="farm-wrapper">

    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
            <link rel="stylesheet" href="css/style.css">

            <title>CONCEPT | Restaurant</title>
        </head>
        <body class="subPage">
            <header>
                <h1>
                    <span>concept</span>
                </h1>
                <nav class="gMenu">
                    <input class="menu-btn" type="checkbox" id="menu-btn">
                    <label class="menu-icon" for="menu-btn">
                        <span class="navicon"></span>
                    </label>
                    <ul class="menu">
                        @*
                        <li><a href="index.html">home</a></li>
                        <li><a href="concept.html">concept</a></li>
                        <li><a href="menu.html">menu</a></li>
                        <li><a href="info.html">info</a></li>*@

                        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>

                    </ul>
                </nav>
            </header>
            <main>
                <section>
                    <h2>入口的瞬間<br class="onlySP">身體感到無比喜悅</h2>
                    <p class="lead">
                        大量使用在自家農場享受陽光洗禮<br>
                        新鮮現摘的有機蔬菜
                    </p>
                    <section class="conceptDetailSec">
                        <h3>Fresh</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph01.jpg" alt="">
                        </p>
                        <p class="text">
                            以色彩繽紛的沙拉充分補充維他命。<br>
                            享用早晨現採蔬菜的爽脆口感與自製醬料。
                        </p>
                    </section>
                    <section class="conceptDetailSec reverse">
                        <h3>Healthy</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph02.jpg" alt="">
                        </p>
                        <p class="text">
                            主菜是由廚藝精湛的一流主廚提供的創作料理。<br>
                            使用當地新鮮食材，講究健康的烹調方法。
                        </p>
                    </section>
                    <section class="conceptDetailSec">
                        <h3>Mindful</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph03.jpg" alt="">
                        </p>
                        <p class="text">
                            穿透樹木灑落的柔和陽光，一口一口品嚐食材的美味。<br>
                            度過有別於都市的恬靜時光。
                        </p>
                    </section>
                </section>
            </main>
            <footer>
                <p>
                    @*<img src="images/footer_logo.svg" alt="">*@
                    <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />

                </p>
            </footer>
        </body>
        </html>

解釋程式碼
這段程式碼是使用 ASP.NET MVC 框架的 Razor 語法所撰寫的視圖，並且它負責生成一個網頁，這個網頁是一個正在建置中的多頁網站的「概念」頁面。讓我們逐步解釋這段程式碼的主要部分：

1. Layout & ViewBag

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact7_concept";
}

這段定義了視圖的佈局檔案 (_Layout.cshtml)，該佈局檔案用來標準化網站的整體外觀，例如標頭、導航欄、頁腳等會被多個頁面共用。
ViewBag.Title 是一個動態屬性，它將頁面的標題設定為 "Contact7_concept"，這個標題會顯示在瀏覽器的標題欄中。

2. HTML 結構

<div class="farm-wrapper">
    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

farm-wrapper 是頁面的主要容器，包含一些標題，告知使用者這是「作品-多頁式網站」，並且目前「建置中」。

3. Head 元素

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    @section styles {
        <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
    }
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/style.css">
    <title>CONCEPT | Restaurant</title>
</head>

這裡定義了頁面的 head 部分，包含了字元編碼設置、視窗尺寸的自適應設置 (viewport)、外部字體和樣式表的引用。
@Url.Content("~/Content/css/reset.css") 是一種用來動態生成 CSS 文件路徑的方式，保證在任何部署環境中都能正確引用資源。
@section styles 是用來在該頁面額外注入一些樣式，這部分的 CSS 文件 (farm-style.css) 將應用到該頁面。

4. 導航欄

<nav class="gMenu">
    <input class="menu-btn" type="checkbox" id="menu-btn">
    <label class="menu-icon" for="menu-btn">
        <span class="navicon"></span>
    </label>
    <ul class="menu">
        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
    </ul>
</nav>

導航欄使用了 input 元素和 label 元素實現手機端的可折疊菜單。使用者可以點擊來展開或折疊導航選單。
使用 @Url.Action 動態生成連結，根據 MVC 的路由設置導向不同的控制器和動作，這裡導向的都是 Home 控制器下不同的動作，如 Contact7_index 和 Contact7_menu。

5. 內容區域

<section>
    <h2>入口的瞬間<br class="onlySP">身體感到無比喜悅</h2>
    <p class="lead">
        大量使用在自家農場享受陽光洗禮<br>
        新鮮現摘的有機蔬菜
    </p>
    <section class="conceptDetailSec">
        <h3>Fresh</h3>
        <p class="photo">
            <img src="~/templates/concept_ph01.jpg" alt="">
        </p>
        <p class="text">
            以色彩繽紛的沙拉充分補充維他命。<br>
            享用早晨現採蔬菜的爽脆口感與自製醬料。
        </p>
    </section>

這裡展示了網頁的主要內容，描述了餐廳的理念，結合圖片和文字介紹了餐廳提供的有機、新鮮、健康的餐點理念。每個 conceptDetailSec 區域表示一個主題，比如 "Fresh"、"Healthy" 和 "Mindful"。

6. 圖片

<img src="~/templates/concept_ph01.jpg" alt=""> 用來顯示圖片，~ 是 ASP.NET 的路徑語法，它指向應用程式根目錄，以便生成正確的資源路徑。

7. Footer

<footer>
    <p>
        <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
    </p>
</footer>

頁腳部分顯示了一個圖片，這裡圖片是網頁設計者的個人照片或其他自定義內容。

總結

這個頁面展示了餐廳的概念和設計，使用了多種圖片、文本和導航功能，並且採用了現代的網頁設計技巧（如自適應導航欄和字體）。它運用了 ASP.NET MVC 的 Razor 語法來動態生成部分內容（例如 URL 和樣式表的引用），從而保持頁面靈活性。
剩下兩個明天說~大家明天見~

一頁式網站2

多頁式網站_下

系列文

asp.net可以變出那些功能共 30 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22088 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

asp.net可以變出那些功能系列 第 14 篇